<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title>种植地图首页</title>
    <!--引用百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6bOBR0p9u2K5PnjtzWurHzHP"></script>
    <script type="text/javascript" th:src="@{/echarts/Heatmap_min.js}"></script>
    <script type="text/javascript" th:src="@{/echarts/echarts(1).js}"></script>
    <script type="text/javascript" th:src="@{/echarts/bmap.js}"></script>
    <script type="text/javascript" src="/jquery.min.js"></script>
    <script type="text/javascript" src="/layer.js"></script>
    <script type="text/javascript" src="/js/ajaxFactory.js"></script>
    <script type="text/javascript" src="/js/crudFactory.js"></script>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 800px;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
        .layui-layer-dialog .layui-layer-content{
        }
    </style>

</head>

<body>
<div class="container"><!-- 这是使用了bootstrap -->
    <div style="width: 100%;height: 40px; border-bottom: 1px solid gray">
        <span>&nbsp;&nbsp;&nbsp;地址定位：</span>
        <input type="text" name="input_site" id="input_site" style="height:30px;line-height:30px;width: 300px;"/>
        <input type = "button" onclick = "searchLocation()" style="width: 100px; height: 35px;" value="查 找" ></input>
        <input type = "button" onclick = "returnOrigin()" style="width: 100px; height: 35px;" value="还原中心点" ></input>
        <!--<input type = "button" onclick = "startAddPoint()" style="width: 100px; height: 35px;" value="标 记" ></input>-->
        <span style="font-size: 12px">【中心点坐标：X：124.124594, Y：50.433805】</span>
        <!--<span>地图打点：</span>
        <input type = "button" style="background-image: url(marker.gif) ; height: 35px; width: 75px; "></input>-->
    </div>
    <div id="allmap"></div>
    <form class="form-horizontal" role="form" action=""
          id="mapMsgForm" method="post">
        <div class="form-group">
            <div class="col-sm-10">
                <input type="text" name="trade_id" >
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10">
                <input type="hidden" name="pointX" value="">
                <!-- 标记坐标 -->
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10">
                <input type="hidden" name="pointY" value="">
                <!-- 标记坐标 -->
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default"></button>
            </div>
        </div>
    </form>
</div>

</body>
<script th:inline="javascript">
    var crop_type = [[${@dict.getType('crop_type')}]];
    //console.log(crop_type);
</script>
<script type="text/javascript">

    /***echart 开始**/
    var dom = document.getElementById("allmap");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    $z.ajaxStrAndJson({
        url: "/cropmanage/jsonok",
        data: {start: 0, pageSize: 500},
        success: function (data) {
            alldata=[];
            for (var i = 0; i < data.result.length; i++) {
                var obj = {};
                var value = [];
                obj.name = data.result[i]["crop_name"];
                value.push(data.result[i]["lng"]);
                value.push(data.result[i]["lat"]);
                value.push(data.result[i]["mianji"]);
                value.push(data.result[i]["sort1"]);
                obj.value = value;
                alldata.push(obj);
            }
            //console.log(alldata);
            option = {
                title: {
                    left: 'center'
                },
                tooltip : {
                    trigger: 'item',
                    padding: 10,
                    backgroundColor: '#222',
                    borderColor: '#777',
                    borderWidth: 1,
                    formatter: function (obj) {
                        var value = obj.value;
                        return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                            + obj.seriesName
                            + '</div>'
                            + '作物名称：' + obj.name + '<br>'
                            +  '经度：' + value[0] + '<br>'
                            +  '纬度：' + value[1] + '<br>'
                            +  '面积：' + value[2] + '<br>'
                    }
                    // formatter: '{a}:<br />{b}'
                },
                // tooltip : {
                //     trigger: 'item',
                //     formatter: '{b}'
                // },

                bmap: {
                    center: [124.757,52.346],
                    zoom: 14,
                    roam: true,
                    mapStyle: {
                        style:'grayscale'
                    }
                },
                visualMap: {
                    padding: 25,
                    backgroundColor:'rgba(60,60,40,0.4)',
                    borderColor:'#888888',
                    borderWidth:2,
                    textStyle:{
                        fontSize:12
                    },
                    show: true,
                    type: 'piecewise',// 定义为分段型 visualMap
                    top: 'top',
                    itemGap:20,
                    itemWidth:40,
                    itemHeight:25,
                    hoverLink:true,

                    calculable: true,
                    piecewise:{
                        textStyle:{
                            color:'red'
                        }
                    },
                    categories: ['蔬菜','水果', '花卉', '作物', '中药材','其它'],
                    inRange: {
                        color: ['green','GreenYellow','yellow','orange','DarkRed','#333']
                    }
                },
                series : [
                    {
                        name: '种植信息',
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        //data: convertData(data),
                        data:alldata,
                        symbolSize: 12,
                        rippleEffect: {
                            brushType: 'stroke',
                            scale: 4.5
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                // '{b}: {@score}'
                                position: 'right',
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                            }
                        }
                    }
                ]
            }
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }

        }
    });
    /***echart 结束**/
    function returnOrigin()
    {
        map.centerAndZoom(new BMap.Point(124.757,52.346), 14);
    }



    //根据给定的地址设置地图的中心点
    function searchLocation(){
        var site = $("#input_site").val();
        var option = {
            onSearchComplete: function(results){
                if (local.getStatus() == BMAP_STATUS_SUCCESS){
                    if(results.getCurrentNumPois()){
                        map.centerAndZoom(results.getPoi(0).point,12);
                        //$("#current_city").text(results.city);
                    }
                }else{

                    alert("没有检索到您输入的地址");
                }
            }
        };
        var local = new BMap.LocalSearch(map,option);
        local.search(site);
    }
</script>
</html>